<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main style="background: #f2f2f2;">
      <el-main class="main">
        <!-- 查詢 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="formInline.user" placeholder="消息标题" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="线上" value="shanghai" />
              <el-option label="线下" value="beijing" />
              <el-option label="全部" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="dialogAddVisible = true">发布消息</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-row style="padding-top: 20px;">
          <el-col :span="24">
            <el-table :data="data" border style="width: 100%;">
              <el-table-column prop="num" label="编号" align="center" />
              <el-table-column prop="name" label="消息标题" align="center" />
              <el-table-column prop="address" label="发布时间" align="center" />
              <el-table-column prop="" label="发布人员" align="center" />
              <el-table-column prop="address" label="操作" align="center">
                <el-button type="text" @click="dialogEditVisible = true">
                  查看
                </el-button>
                <el-button type="text">删除</el-button>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 分页 -->
        <el-row style="padding-top: 20px;">
          <el-col :span="24" class="pagination">
            <div class="all">
              <div class="all-1">
                <input type="checkbox" />
                <span>全选</span>
              </div>
              <div>
                <el-select
                  v-model="formInline.advertising"
                  placeholder="批量操作"
                  class="select"
                >
                  <el-option label="线上" value="shanghai" />
                  <el-option label="线下" value="beijing" />
                  <el-option label="全部" value="sichuan" />
                </el-select>
              </div>
              <el-button class="btn">确定</el-button>
            </div>
            <el-pagination background layout="prev, pager, next" :total="10" />
          </el-col>
        </el-row>
      </el-main>
    </el-main>
  </el-container>
  <!-- 新增 -->
  <div>
    <el-dialog
      v-model="dialogAddVisible"
      title="确定新增"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
        :model="add"
        status-icon
      >
        <el-form-item label="消息标题" prop="name">
          <el-input v-model="add.name" placeholder="请输入消息标题"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="des">
          <el-input
            v-model="add.des"
            type="textarea"
            placeholder="请输入消息内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogAddVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogAddVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 查看 -->
  <div>
    <el-dialog
      v-model="dialogEditVisible"
      title="查看消息"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
        :model="Edit"
        status-icon
      >
        <div class="edit">
          <span>健身房公告</span>
          <span>2022-11-11</span>
        </div>
        <div class="editContent">
          <p>
            尊敬的用户，为了给您带来更好的体验，系统已全新上线啦。
          </p>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogEditVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogEditVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessageBox, FormRules } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'

const value1: any = ref()
const formInline: any = reactive({
  user: '',
  region: '',
  advertising: '',
})
const dialogAddVisible = ref(false)
const dialogEditVisible = ref(false)
const add: any = reactive({
  name: '',
  des: '',
})
const rules = reactive<FormRules>({
  name: {
    required: true,
    message: '不能为空',
    trigger: 'blur',
  },
  des: {
    required: true,
    message: '不能为空',
    trigger: 'blur',
  },
})
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const onSubmit = () => {
  console.log('submit!')
}
const data = [
  {
    num: 111,
  },
]
</script>

<style scoped>
.main {
  background-color: white;
  border-radius: 10px;
}
.pagination {
  display: flex;
  justify-content: space-between;
}
.all {
  font-size: 12px;
  display: flex;
  align-items: center;
}
.all-1 {
  margin: 0 20px;
}
.select {
  width: 99px;
}
.btn {
  margin: 0 20px;
}
.edit {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  border-bottom: 1px solid #f6f6f6;
}
</style>
